現在網頁開發已經慢慢趨向簡易、快速的開發方式。
但在快速開發下，要保持一定的質感，過場動畫就成了個不可或缺的元素。

過場動畫

其實現在已經有很多好用的套件，例如Bootstrap、JQuery...等。
各種套件都能幫你完成過場動畫，但如果只是想要有個簡單的過場動畫的話。
我們可以用Vue本身支援的屬性來完成。
(需要範例來理解的小夥伴，說明完後有範例，可以先去看完再來對照)

官方上提供了6種不同的class 狀態

• v-enter：進入過渡(v-enter-active)的開始狀態。

• v-enter-active：過渡生效時的狀態。

• v-enter-to：進入過渡(v-enter-active)的結束狀態。

• v-leave：離開過渡(v-leave-active)的開始狀態。

• v-leave-active：離開過渡生效時的狀態。

• v-leave-to：離開過渡(v-leave-active)的結束狀態。

為了方便理解，上面一長串的文字，官方也給出了一張狀態圖

想使用過場動畫的元件(Element)需要放到<transition></transition>標籤內，
會在屬性欄自動產生上述那些class。

例如:
如果你使用了 <transition name="my-transition">，
那麼 v-enter 會替換為 my-transition-enter。

<transition name="my-transition">
//
//會自動變成
//
<transition name="my-transition" class="my-transition-enter">

(其餘的class也會自動產生，就省略不打了。)

接下來我們看看範例:

1. 在App.vue輸入下方程式碼:

<template>
  <img alt="Vue logo" src="./assets/logo.png">
  <div id="demo">
    <button @click="isshow">
      {{msg}}
    </button>
    <transition name="fade">
      <p v-if="show">我是神隱字幕</p>
    </transition>
  </div>
</template> 

做了一個按鈕與一段文字，
當點擊按鈕的時候，會觸發isshow這個function()

<script>
export default {
  name: 'App',
  components: {
  },
  data:function(){
    return{
      show: true,
      msg:"按一下"
    }
  },
  methods:{
    isshow:function(){
      this.show = !this.show //變成與現在相反狀態
    }
  }
}
</script>

當觸發isshow事件的時候，會變更show的狀態
( true -> false ， false -> ture)

style:

<style>

#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
.fade-enter-active, .fade-leave-active {
  transition: opacity 0.5s;
}
.fade-enter, .fade-leave-to  {
  opacity: 0;
}

</style>

設定name = 'fade' 的進場動畫(.fade-enter-active)
與離場動畫(.fade-leave-active)為0.5秒。
設定name = 'fade' 的進場開始狀態 與出場結束不透明度為0(完全透明的意思)

2. 看看結果
   

結語

官方也提供了以下 attribute 來自定義過場class名：

• enter-class
• enter-active-class
• enter-to-class
• leave-class
• leave-active-class
• leave-to-class

有興趣的小夥伴可以試試看透過以上的class 搭配Animate.css使用，
也能達到不錯的效果。